<template>
    <div class="path-index container">
        <header>
            <van-nav-bar title="我的地址" left-arrow @click-left="goBack" />
        </header>
        <section>
            <ul v-if="list.length">
                <li v-for="(item, index) in list" :key="index" @click="goList(item)">
                    <div>
                        <span>{{ item.name }}</span>
                        <span>{{ item.tel }}</span>
                    </div>
                    <div class="city">
                        <span class="active" v-if="item.isDefault == 1">[默认]</span>
                        <span>{{ item.province }}</span>
                        <span>{{ item.city }}</span>
                        <span>{{ item.county }}</span>
                        <span>{{ item.addressDetail }}</span>
                    </div>
                </li>
            </ul>
            <h1 v-else>
                <div class="nothing">
                    <van-empty class="custom-image" description="您的地址栏为空">
                    </van-empty>
                </div>
            </h1>
            <van-button round type="danger" class="bottom-button" @click="newList('add')">添加地址</van-button>
        </section>
        <Tabbar></Tabbar>
    </div>
</template>

<script>
import Tabbar from '@/components/common/Tabbar.vue';
import http from '@/common/api/request'
import bus from '@/common/bus.js'
import { mapState, mapMutations } from 'vuex'
export default {
    data() {
        return {
            pathStatus: false
        }
    },
    components: { Tabbar },
    created() {
        // 从订单页面进来
        if (this.$route.query.type == 'select') {
            this.pathStatus = true;
        }

        this.getData();
    },
    computed: {
        ...mapState({
            list: state => state.path.list
        })
    },
    methods: {
        ...mapMutations(['initData']),
        getData() {
            http.$axios({
                url: '/api/selectAddress',
                method: 'POST',
                headers: {
                    token: true
                }
            }).then(res => {
                this.initData(res.data)
            })
        },
        goList(option) {
            // this.pathStatus为true代表从订单页面进入的：选择状态
            if (this.pathStatus) {
                bus.$emit('selectPath', JSON.stringify(option));
                this.$router.back();
                return;
            }

            this.$router.push({
                name: 'path-list',
                params: {
                    key: JSON.stringify(option)
                }
            })

            
        },
        newList(option){
            this.$router.push({
                name: 'path-list',
                params: {
                    key: JSON.stringify(option)
                }
            })
        },
        goBack() {
            
                this.$router.back()
            
        }
    }
}
</script>

<style scoped>
header {
    width: 100%;
    height: 1.473333rem;

}

::v-deep .van-nav-bar__content {
    background-color: #fff;
    height: 58px;
}

::v-deep .van-nav-bar__title {
    color: #1b1b1b;
    font-size: 18px;
}

::v-deep .van-nav-bar .van-icon {
    color: #1b1b1b;
    font-size: 0.593333rem;
}

section {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #F7F7F7;

}

section ul {
    width: 100%;
}

section ul li {
    padding: 0.266666rem 0.4rem;
    margin: 0.36rem 0;
    background-color: #FFFFFF;
}

section ul li span {
    padding-right: 0.4rem;
    font-size: 0.426666rem;
}

/* ::v-deep .tabbar{
    border-top:2px solid #ccc;
} */
.bottom-button {
    margin-top: 0.8rem;
    width: 5.2rem;
    font-size: 0.48rem;
    background-color: #1b1b1b;
    border: 1px solid #1b1b1b;

}

.active {
    color: #ccc;
}

.city span {
    padding-right: 0.16rem;
}

.nothing {
    text-align: center;
    margin-top: 180px;
}
</style>